<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>beatHeart</title>

    <style>
        .heart{
            margin: 100px auto;
            /*background-color: #0f0;*/
            width: 400px;
            height: 400px;
            position: relative;
            /*复习
              animation: name duration timing-function delay iteration-count direction

              timing-function:规定动画的速度曲线。
                    linear	    动画从头到尾的速度是相同的。	测试
                    ease	    默认。动画以低速开始，然后加快，在结束前变慢。	测试
                    ease-in	    动画以低速开始。	测试
                    ease-out	动画以低速结束。	测试
                    ease-in-out	动画以低速开始和结束。	测试
                    cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

              direction:属性定义是否应该轮流反向播放动画。
                    normal	    默认值。动画应该正常播放。
                    alternate	动画应该轮流反向播放。

             */
            animation: sport 1s linear 0s infinite normal;
        }

        @keyframes sport {
            0%{
                transform: scale(1);
            }
            50%{
                transform: scale(1.1);
            }
            100%{
                transform: scale(1);
            }
        }

        .heart .left{
            width: 220px;
            height: 220px;
            /*border: 1px solid #000;*/
            box-sizing: border-box;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: #f00;
        }

        .heart .right{
            width:  220px;
            height:  220px;
            /*border: 1px solid #000;*/
            box-sizing: border-box;
            border-radius: 50%;
            position: absolute;
            right: 0;
            top: 0;
            background-color: #f00;
        }

        .heart .bottom{
            width: 220px;
            height: 220px;
            position: absolute;
            bottom: 90px;
            /*
            知识点:定位居中
            left: 50%;
            transform: translateX(-50%) rotateZ(45deg);
            */
            left: 50%;
            transform: translateX(-50%) rotateZ(45deg);

            background-color: #f00;
        }

        .heart .bottom, .left, .right{
            box-shadow: 0 0 40px red;
        }
    </style>
</head>
<body>



<div class="heart">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</div>

</body>
</html>